<template>
  <Card title="用例结果详情" :bordered="false" :dis-hover="true">
    <Form inline label-position="right" :label-width="100">
      <Row>
        <Col span="6">
          <FormItem label="用例名称">
            <label
              class="
                ivu-input-wrapper
                ivu-input-wrapper-default
                ivu-input-type-text
                ivu-input
                ivu-input-default
              "
              >{{ testcaseResult.testcase_name }}</label
            >
          </FormItem>
        </Col>
        <Col span="6">
          <FormItem label="所属项目">
            <label
              class="
                ivu-input-wrapper
                ivu-input-wrapper-default
                ivu-input-type-text
                ivu-input
                ivu-input-default
              "
              >{{ testcaseResult.project_name }}</label
            >
          </FormItem>
        </Col>
        <Col span="6">
          <FormItem label="所属接口">
            <label
              class="
                ivu-input-wrapper
                ivu-input-wrapper-default
                ivu-input-type-text
                ivu-input
                ivu-input-default
              "
              >{{ testcaseResult.api_name }}</label
            >
          </FormItem>
        </Col>
        <Col span="6">
          <FormItem label="所属场景">
            <label
              class="
                ivu-input-wrapper
                ivu-input-wrapper-default
                ivu-input-type-text
                ivu-input
                ivu-input-default
              "
              >{{ testcaseResult.testsuite_name }}</label
            >
          </FormItem>
        </Col>
      </Row>
      <Row>
        <Col span="16">
          <FormItem label="请求URL">
            <Input readonly :value="testcaseResult.url" />
          </FormItem>
        </Col>
        <Col span="8">
          <FormItem label="请求方法">
            <Input readonly :value="testcaseResult.method" />
          </FormItem>
        </Col>
      </Row>
      <Row>
        <Col span="8">
          <FormItem label="执行人">
            <label
              class="
                ivu-input-wrapper
                ivu-input-wrapper-default
                ivu-input-type-text
                ivu-input
                ivu-input-default
              "
              >{{ testcaseResult.executor_real_name }}
            </label>
          </FormItem>
        </Col>
        <Col span="8">
          <FormItem label="执行时间">
            <DatePicker
              type="date"
              readonly
              :value="testcaseResult.execute_time"
              format="yyyy-MM-dd HH:mm:ss"
              style="width: 100%"
            />
          </FormItem>
        </Col>
        <Col span="8">
          <FormItem label="测试结果">
            <Input
              readonly
              :value="testcaseResult.status === 'PASS' ? '通过' : '失败'"
              :class="
                testcaseResult.status === 'PASS'
                  ? 'input-call-pass'
                  : 'input-call-fail'
              "
            />
          </FormItem>
        </Col>
      </Row>
    </Form>
    <Divider />
    <Tabs
      name="testcase-result-detail-tabs"
      :value="2"
      :animated="true"
    >
      <TabPane
        label="Headers参数"
        tab="testcase-result-detail-tabs"
        name="headers"
        style="padding: 5px"
      >
        <JsonEditor
          :value="testcaseResult.headers"
          jsonEditorId="testcaseResultHeaders"
          style="height: 1050px"
        ></JsonEditor>
      </TabPane>
      <TabPane
        :label="bodyTabPaneLabel"
        tab="testcase-result-detail-tabs"
        style="padding: 5px"
        name="request_data"
      >
        <JsonEditor
          :value="testcaseResult.request_data"
          jsonEditorId="testcaseResultData"
          style="height: 1050px"
        ></JsonEditor>
      </TabPane>
      <TabPane
        label="响应结果"
        tab="testcase-result-detail-tabs"
        style="padding: 5px"
      >
        <Row :gutter="10">
          <Col span="12">
            <span style="font-weight: bold; font-size: 14px; color: #17233d"
              >响应结果</span
            >
            <JsonEditor
              :value="testcaseResult.actual_response_data"
              jsonEditorId="testcaseResultActualResponseData"
              style="height: 97.6%; margin-top: 5px"
            ></JsonEditor>
          </Col>
          <Col span="12">
            <Row>
              <Col span="24">
                <span style="font-weight: bold; font-size: 14px; color: #17233d"
                  >输出变量结果</span
                >
                <span style="font-size: 14px; float: right; color: #2d8cf0">
                  响应状态码：
                  <label>{{ testcaseResult.actual_status_code }}</label>
                  &nbsp;&nbsp;&nbsp;&nbsp; 响应时长(ms)：
                  <label>{{ testcaseResult.elapsed_ms }}</label>
                </span>
                <JsonEditor
                  :value="testcaseResult.output_result"
                  jsonEditorId="testcaseResultOutputResult"
                  style="height: 500px; margin-top: 5px"
                ></JsonEditor>
              </Col>
            </Row>
            <Row style="margin-top: 15px">
              <Col span="24">
                <span style="font-weight: bold; font-size: 14px; color: #17233d"
                  >失败原因</span
                >
                <JsonEditor
                  :value="testcaseResult.failure_reason"
                  jsonEditorId="testcaseResultFailureReason"
                  style="height: 500px; margin-top: 5px"
                ></JsonEditor>
              </Col>
            </Row>
          </Col>
        </Row>
      </TabPane>
    </Tabs>
  </Card>
</template>

<script>
import JsonEditor from "_c/json-editor";
import { getTestcaseResultById } from "@/api/HttpAutoTestService/testcase-result";

export default {
  name: "testcase-result-detail",
  components: {
    JsonEditor,
  },
  mounted() {
    const id = this.$route.query.id;
    getTestcaseResultById(id).then((res) => {
      this.testcaseResult = res.data;
    });
  },
  computed: {
    bodyTabPaneLabel() {
      return `Body参数（${this.testcaseResult.request_data_type})`;
    },
  },
  data() {
    return {
      testcaseResult: {},
    };
  },
  methods: {},
};
</script>

<style scoped>
.input-call-fail :nth-last-child(1) {
  color: #ed4014 !important;
}

.input-call-pass :nth-last-child(1) {
  color: #19be6b !important;
}
.ivu-form-item {
  width: 100%;
}
</style>
